<template>
  <div class="freight-template">
    <search-table :url="url" ref="searchtable" :form="form" :columns="columns">

      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="名称">
            <a-input
              :maxLength="32"
              v-decorator="[
                'fareName',
              ]"
              placeholder="请输入名称"
            >
            </a-input>
          </a-form-item>
        </a-form>
      </template>
      <template slot="oprationRow">
        <permission authority="fare:model:add">
          <a-button @click="openInfo()" type="primary" icon="plus">新增</a-button>
        </permission>
        <permission authority="fare:model:delete">
          <a-button @click="deleteRows($refs.searchtable.selectedRowKeys)" type="danger" icon="delete">删除</a-button>
        </permission>
      </template>
      <template slot="tableOperation" slot-scope="{record}">
        <permission authority="fare:model:add">
          <span class="text-primary pointer" @click="openInfo(record, {copy: true})">复制模板</span>
        </permission>
        <permission authority="fare:model:modify">
          <a-divider type="vertical" />
          <span class="text-primary pointer" @click="openInfo(record)">修改</span>
        </permission>
        <permission authority="fare:model:delete">
          <a-divider type="vertical" />
          <span class="text-danger pointer" @click="deleteRows([record.id])">删除</span>
        </permission>
      </template>
    </search-table>
    <template-info :record="currentRecord" @cancel="closeInfoModal" :visible="infoVisible" />
  </div>
</template>
<script>
import TemplateInfo from './components/TemplateInfo'
import cloneDeep from 'lodash/cloneDeep'
export default {
  name: 'freight-template',
  data () {
    return {
      url: '/fare/model/page',
      infoVisible: false,
      currentRecord: {},
      form: this.$form.createForm(this, { name: 'table_search' }),
      columns:  [{
          title: '编号',
          dataIndex: 'id',
        },
        {
          title: '模板名称',
          dataIndex: 'fareName',
        },
        {
          title: '添加时间',
          dataIndex: 'createDate',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        },]
    }
  },
  components: {
    TemplateInfo
  },
  methods:{
    closeInfoModal (freshTable) {
      this.infoVisible = false
      if (freshTable) {
        this.$refs.searchtable.refreshTable()
      }
    },
    openInfo (record={}, params = {}) {
      console.log('record,params',record,params);
      this.currentRecord = Object.assign({},cloneDeep(record), params)
      this.infoVisible = true
    },
    deleteRows (ids) {
      if (!(ids && ids.length)) return this.$message.warn('请先选择一项后再进行操作')
      this.$confirm({
        title: '删除提示',
        content: '删除操作不可恢复，请确认是否删除？',
        okText: '确认删除',
        cancelText: '取消',
        onOk: ()=> {
          this.$post('/fare/model/delete', {ids}).then(res => {
            if (res && res.returnCode == 1000) {
              this.$message.success('删除成功')
              this.$refs.searchtable.refreshTable()
            }
          })
        }
      })
    },
  }
}
</script>